<template>
	<view>
		<view class="privacyPopup" custom-style="width: 80%;" :class="{ 'privacyPopupactive' : innerShow}" round position="center">
			<view class="privacyPopup-title">
				<text>{{title}}</text>
			</view>
			<view class="privacyPopup__bd">
				<view class="privacyPopup__tips">{{desc1}}<text style="color:blue"
						@tap="openPrivacyContract">{{urlTitle}}</text></view>
				<view class="privacyPopup__tips">{{desc2}}</view>
			</view>
			<view class="privacyPopup-ft">
				<button id="disagree-btn" type="danger" class="privacyPopup-btn" @tap="handleDisagree" round>不同意</button>
				<button id="agree-btn" type="primary" round open-type="agreePrivacyAuthorization" class="privacyPopup-btn"
					@agreeprivacyauthorization="handleAgree">同意并继续</button>
			</view>
		</view>
		<view @touchmove.stop.prevent :class="innerShow ? 'pupop-model' : 'pupop-models'"></view>
	</view>
</template>

<script>
	let privacyHandler
	let privacyResolves = new Set()
	let closeOtherPagePopUpHooks = new Set()

	if (wx.onNeedPrivacyAuthorization) {
		wx.onNeedPrivacyAuthorization(resolve => {
			if (typeof privacyHandler === 'function') {
				privacyHandler(resolve)
			}
		})
	}

	const closeOtherPagePopUp = (closePopUp) => {
		closeOtherPagePopUpHooks.forEach(hook => {
			if (closePopUp !== hook) {
				hook()
			}
		})
	}
	export default {
		data() {
			return {
				title: "用户隐私保护提示",
				desc1: "感谢您使用本小程序，您使用小程序前应当阅读并同意",
				urlTitle: "《用户隐私保护指引》",
				desc2: "当您点击同意并开始时用小程序服务时，即表示你已理解并同息该条款内容。如您拒绝，将无法正常使用小程序。",
				innerShow: false,
				height: 0,
			}
		},
		mounted() {
			const closePopUp = () => {
				this.disPopUp()
			}
			privacyHandler = resolve => {
				privacyResolves.add(resolve)
				this.popUp()
				// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
				closeOtherPagePopUp(closePopUp)
			}
			this.closePopUp = closePopUp
			closeOtherPagePopUpHooks.add(this.closePopUp)
		},
		methods: {
			handleAgree(e) {
				this.disPopUp()
				// 这里演示了同时调用多个wx隐私接口时要如何处理：让隐私弹窗保持单例，点击一次同意按钮即可让所有pending中的wx隐私接口继续执行 （看page/index/index中的 wx.getClipboardData 和 wx.startCompass）
				privacyResolves.forEach(resolve => {
					resolve({
						event: 'agree',
						buttonId: 'agree-btn'
					})
				})
				privacyResolves.clear()
			},
			handleDisagree(e) {
				this.disPopUp()
				privacyResolves.forEach(resolve => {
					resolve({
						event: 'disagree',
					})
				})
				privacyResolves.clear()
			},
			popUp() {
				if (this.innerShow === false) {
					this.innerShow = true
				}
			},
			disPopUp() {
				if (this.innerShow === true) {
					this.innerShow = false
				}
			},
			openPrivacyContract() {
				wx.openPrivacyContract({
					success: res => {
						console.log('openPrivacyContract success')
					},
					fail: res => {
						console.error('openPrivacyContract fail', res)
					}
				})
			},
			tabBarPageShow() {
				if (this.closePopUp) {
					privacyHandler = resolve => {
						privacyResolves.add(resolve)
						this.popUp()
						// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
						closeOtherPagePopUp(this.closePopUp)
					}
				}
			}
		},
		destroyed() {
			closeOtherPagePopUpHooks.delete(this.closePopUp)
		}
	}
</script>

<style scoped>
	.privacyPopup {
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		box-shadow: 0 0 2px #000;
		border-radius: 10rpx;
		width: 90%;
		height: 420rpx;
		background: #fff;
		display: none;
	}
	.privacyPopupactive {
		display: block;
	}
	.privacyPopup .privacyPopup-title {
		font-size: 36rpx;
		line-height: 36rpx;
		font-weight: 700;
		text-align: center;
		padding: 30rpx 0;
	}

	.privacyPopup__bd {
		padding: 0 30rpx;
		font-size: 28rpx;
		line-height: 36rpx;
	}

	.privacyPopup__tips {
		margin-bottom: 20rpx;
		text-indent: 56rpx;
	}

	.privacyPopup-ft {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 30rpx;
	}

	.privacyPopup-ft .privacyPopup-btn {
		font-size: 28rpx;
	}

	.privacyPopup-ft .privacyPopup-btn:nth-child(2) {
		margin-left: 100rpx;
	}
	.pupop-model {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		background: rgba(0, 0, 0, .5);
	}
	.pupop-models{
		display: none;
	}
</style>